<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">

      <!-- 修改社区下拉框，添加监听事件 -->
      <el-form-item label="社区" prop="communityId">
        <el-select
            v-model="queryParams.communityId"
            placeholder="请选择社区"
            clearable
            filterable
            @change="handleCommunityChange"
        @keyup.enter="handleQuery"
        >
        <el-option
            v-for="ops in optiones"
            :key="ops.communityId"
            :label="ops.name"
            :value="ops.communityId"
        />
        </el-select>
      </el-form-item>

      <!-- 修改楼宇下拉框 -->
      <el-form-item label="楼宇名称" prop="buildingId">
        <el-select
            v-model="queryParams.buildingId"
            placeholder="请先选择社区"
            clearable
            filterable
            :disabled="!queryParams.communityId"
        @keyup.enter="handleQuery"
        >
        <el-option
            v-for="build in buildingList"
        :key="build.buildingId"
        :label="build.name"
        :value="build.buildingId"
        />
        </el-select>
      </el-form-item>

      <!-- 修改房屋下拉框 -->
      <el-form-item label="房屋" prop="houseId">
        <el-select
            v-model="queryParams.houseId"
            placeholder="请先选择楼宇"
            clearable
            filterable
            :disabled="!queryParams.buildingId"
            @keyup.enter="handleQuery"
        >
          <el-option
              v-for="house in houses"
              :key="house.houseId"
              :label="house.roomNo"
              :value="house.houseId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="报修人" prop="reporter">
        <el-input
            v-model="queryParams.reporter"
            placeholder="请输入报修人"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="报修人电话" prop="reporterPhone">
        <el-input
            v-model="queryParams.reporterPhone"
            placeholder="请输入报修人电话"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['property:repair:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="success"
            plain
            icon="Edit"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['property:repair:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['property:repair:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['property:repair:export']"
        >导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="success"
            plain
            icon="View"
            @click="lookStream"
        >查看报修进度
        </el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 修改后的表格部分 -->
    <el-table v-loading="loading" :data="repairList" @selection-change="handleSelectionChange" style="width: 100%">
      <el-table-column type="selection" width="55" align="center"/>

      <el-table-column label="社区" align="center" prop="communityName" width="100"/>
      <el-table-column label="楼宇" align="center" prop="buildingName" width="100"/>
      <el-table-column label="报修类型" align="center" prop="repairType" width="100"/>
      <el-table-column label="报修房间号" align="center" prop="roomNo" width="100"/>
      <el-table-column label="报修人" align="center" prop="reporter" width="100"/>
      <el-table-column label="报修人电话" align="center" prop="reporterPhone" width="120"/>
      <el-table-column label="报修时间" align="center" prop="reportTime" width="120">
        <template #default="scope">
          <span>{{ parseTime(scope.row.reportTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报修描述" align="center" prop="description" width="150" show-overflow-tooltip/>

      <!-- 修改后的图片列 -->
      <el-table-column label="图片" align="center" width="150">
        <template #default="scope">
          <div class="image-cell">
            <template v-if="scope.row.images">
              <!-- 单张图片展示 -->
              <el-image
                  v-if="typeof scope.row.images === 'string'"
                  class="table-image"
                  :src="scope.row.images"
                  :preview-src-list="[scope.row.images]"
                  fit="contain"
                  hide-on-click-modal
                  preview-teleported
              />
              <!-- 多张图片展示 -->
              <el-carousel
                  v-else-if="Array.isArray(scope.row.images) && scope.row.images.length > 0"
                  indicator-position="outside"
                  height="100px"
                  :autoplay="false"
              >
                <el-carousel-item v-for="(img, index) in scope.row.images" :key="index">
                  <el-image
                      class="table-image"
                      :src="img"
                      :preview-src-list="scope.row.images"
                      fit="contain"
                      hide-on-click-modal
                      preview-teleported
                  />
                </el-carousel-item>
              </el-carousel>
            </template>
            <span v-else class="no-image">无图片</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center" prop="status" width="120">
        <template #default="scope">
          <span>{{ {0: '已完成', 1: '已提交', 2: '未处理', 3: '处理中'}[scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="处理人" align="center" prop="workName" width="100"/>
      <el-table-column label="处理时间" align="center" prop="handleTime" width="120">
        <template #default="scope">
          <span>{{ parseTime(scope.row.handleTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="处理描述" align="center" prop="handleDescription" width="150" show-overflow-tooltip/>
      <el-table-column label="优先级" align="center" prop="priority" width="80"/>
      <el-table-column label="预计完成时间" align="center" prop="estimatedTime" width="120">
        <template #default="scope">
          <span>{{ parseTime(scope.row.estimatedTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实际完成时间" align="center" prop="actualTime" width="120">
        <template #default="scope">
          <span>{{ parseTime(scope.row.actualTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="费用" align="center" prop="fee" width="80"/>
      <el-table-column label="是否付费" align="center" prop="isPaid" width="100">
        <template #default="scope">
          {{ scope.row.isPaid === 1 ? '已缴费' : '未缴费' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" fixed="right">
        <template #default="scope">
          <el-button link type="primary" size="small" icon="Edit" @click="handleUpdate(scope.row)"
                     v-hasPermi="['property:repair:edit']">修改
          </el-button>
          <el-button link type="primary" size="small" icon="Delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['property:repair:remove']">删除
          </el-button>
          <el-button link type="primary" size="small" icon="View" @click="handleViewDetail(scope.row)"
                     v-hasPermi="['property:repair:query']">查看
          </el-button>
          <el-button link type="primary" size="small" icon="Plus" @click="handleAssign(scope.row)"
                     v-hasPermi="['property:repair:assign']">分配
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />


    <!-- 添加或修改报修管理对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="repairRef" :model="form" :rules="rules" :label-width="'100px'">


        <!-- 修改社区下拉框，绑定到 form.communityId -->
        <el-form-item label="社区" prop="communityId">
          <el-select
              v-model="form.communityId"
              placeholder="请选择社区"
              clearable
              filterable
              @change="handleFormCommunityChange"
          >
            <el-option
                v-for="ops in optiones"
                :key="ops.communityId"
                :label="ops.name"
                :value="ops.communityId"
            />
          </el-select>
        </el-form-item>

        <!-- 修改楼宇下拉框，绑定到 form.buildingId -->
        <el-form-item label="楼宇名称" prop="buildingId">
          <el-select
              v-model="form.buildingId"
              placeholder="请先选择社区"
              clearable
              filterable
              :disabled="!form.communityId"
              @change="handleFormBuildingChange"
          >
            <el-option
                v-for="build in formBuildingList"
                :key="build.buildingId"
                :label="build.name"
                :value="build.buildingId"
            />
          </el-select>
        </el-form-item>

        <!-- 修改房屋下拉框，绑定到 form.houseId -->
        <el-form-item label="房屋" prop="houseId">
          <el-select
              v-model="form.houseId"
              placeholder="请先选择楼宇"
              clearable
              filterable
              :disabled="!form.buildingId"
          >
            <el-option
                v-for="house in formHouses"
                :key="house.houseId"
                :label="house.roomNo"
                :value="house.houseId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="报修房间号" prop="roomNo">
          <el-input v-model="form.roomNo" placeholder="请输入报修房间号"/>
        </el-form-item>
        <el-form-item label="报修人" prop="reporter">
          <el-input v-model="form.reporter" placeholder="请输入报修人"/>
        </el-form-item>
        <el-form-item label="报修人电话" prop="reporterPhone">
          <el-input v-model="form.reporterPhone" placeholder="请输入报修人电话"/>
        </el-form-item>
        <el-form-item label="报修时间" prop="reportTime">
          <el-date-picker clearable
                          v-model="form.reportTime"
                          type="date"
                          value-format="YYYY-MM-DD"
                          placeholder="请选择报修时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="报修描述" prop="description">
          <el-input v-model="form.description" type="textarea" placeholder="请输入内容"/>
        </el-form-item>


        <el-form-item label="图片" prop="images" label-width="120px">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/upload/img"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="headers"
          >
            <img v-if="form.images" :src="form.images" class="avatar"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>

        <el-form-item label="优先级" prop="priority">
          <el-select v-model="form.priority" placeholder="请选择优先级">
            <el-option label="紧急情况" value="紧急情况"/>
            <el-option label="非紧急情况" value="非紧急情况"/>
          </el-select>
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

  <!-- 分配维修工人弹框 -->
  <el-dialog title="分配维修任务" v-model="assignOpen" width="500px" append-to-body>
    <el-form ref="assignRef" :model="assignForm" :rules="assignRules" label-width="100px">
      <el-form-item label="维修工人" prop="workId">
        <el-select
            v-model="assignForm.workId"
            placeholder="请选择维修工人"
            clearable
            filterable
            style="width: 100%"
        >
          <el-option
              v-for="worker in workerList"
              :key="worker.id"
              :label="worker.work_name"
              :value="worker.id"
          >
            <span style="float: left">{{ worker.work_name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ worker.type }}</span>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="维修类型" prop="workType">
        <el-select
            v-model="assignForm.workType"
            placeholder="请选择维修类型"
            clearable
            filterable
            style="width: 100%"
        >
          <el-option
              v-for="worker in workerList"
              :key="worker.id"
              :label="worker.type"
              :value="worker.type"
          />
        </el-select>
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitAssign">确 定</el-button>
        <el-button @click="cancelAssign">取 消</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup name="Repair">
import {
  listRepair,
  getRepair,
  delRepair,
  addRepair,
  updateRepair,
  getoption,
  getAssign,
  getBuilding,
  getHouse
} from "@/api/property/repair"

import {useRouter} from 'vue-router'
import {ElMessage} from "element-plus";
import {getToken} from "@/utils/auth.js";
import {Plus} from "@element-plus/icons-vue";
import {onMounted, ref, reactive, watch} from 'vue';
import {checkPermi} from "@/utils/permission.js";


// 在 setup 中获取 router
const {proxy} = getCurrentInstance()
const router = useRouter()

// 基础响应式变量
const repairList = ref([])
const open = ref(false)
const assignOpen = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const headers = ref({Authorization: "Bearer " + getToken()})
// 检查用户权限
const hasPermi = (value) => {
  return checkPermi(value) // 若依框架的权限检查方法
}
// 分配相关数据
const assignForm = ref({
  repairId: null,
  workId: null,
  workType: null
})

const workerList = ref([])

// 分配表单验证规则
const assignRules = ref({
  workId: [{ required: true, message: "请选择维修工人", trigger: "change" }],
  workType: [{ required: true, message: "请选择维修类型", trigger: "change" }]
})

// 主表单数据
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    communityId: null,
    buildingName: null,
    communityName: null,
    workName: null,
    buildingId: null,
    repairType: null,
    roomNo: null,
    reporter: null,
    reporterPhone: null,
    reportTime: null,
    description: null,
    images: null,
    status: null,
    handler: null,
    handleTime: null,
    handleDescription: null,
    priority: null,
    estimatedTime: null,
    actualTime: null,
    fee: null,
    isPaid: null,
  },
  rules: {},
})

const {queryParams, form, rules} = toRefs(data)

// 其他响应式变量
const optiones = ref([])
const buildingList = ref([])
const houses = ref([])

// 新增表单专用的楼宇和房屋数据
const formBuildingList = ref([])
const formHouses = ref([])

/** 查询报修管理列表 */
function getList() {
  loading.value = true
  listRepair(queryParams.value).then(response => {
    repairList.value = response.rows.map(item => {
      if (item.images && typeof item.images === 'string') {
        try {
          item.images = JSON.parse(item.images)
        } catch (e) {
          // 解析失败保持原样
        }
      }
      return item
    })
    total.value = response.total
    sessionStorage.setItem('repairList', JSON.stringify(repairList.value))
    loading.value = false
  })
}

// 获取维修工人列表
function getWorkerList() {
  getAssign().then(response => {
    workerList.value = response.data || response || []
  }).catch(error => {
    console.log("获取维修工人数据失败:", error)
    workerList.value = []
  })
}

// 分配相关方法
function handleAssign(row) {
  let _repairId
  if (row && row.repairId) {
    _repairId = row.repairId
  } else if (ids.value.length === 1) {
    _repairId = ids.value[0]
  } else {
    proxy.$modal.msgError("请选择一条数据进行分配")
    return
  }

  assignForm.value = Object.assign({}, assignForm.value, {
    repairId: _repairId,
    workId: null,
    workType: null
  })
  assignOpen.value = true
}

function submitAssign() {
  if (!proxy.$refs["assignRef"]) return

  proxy.$refs["assignRef"].validate(valid => {
    if (valid) {
      proxy.$modal.msgSuccess("分配成功")
      assignOpen.value = false
    }
  })
}

function cancelAssign() {
  assignOpen.value = false
  assignForm.value = {
    repairId: null,
    workId: null,
    workType: null
  }
  setTimeout(() => {
    if (proxy.$refs["assignRef"]) {
      proxy.$refs["assignRef"].resetFields()
    }
  }, 100)
}

// 表单社区变化监听
const handleFormCommunityChange = (communityId) => {
  form.value.buildingId = null
  form.value.houseId = null
  if (communityId) {
    fetchFormBuildings(communityId)
  } else {
    formBuildingList.value = []
    formHouses.value = []
  }
}

// 表单楼宇变化监听
const handleFormBuildingChange = (buildingId) => {
  form.value.houseId = null
  if (buildingId) {
    fetchFormHouses(buildingId)
  } else {
    formHouses.value = []
  }
}

// 获取表单楼宇数据
const fetchFormBuildings = async (communityId) => {
  try {
    const response = await getBuilding(communityId)
    formBuildingList.value = response.data || response || []
  } catch (error) {
    console.log("获取表单楼宇数据失败:", error)
    formBuildingList.value = []
  }
}

// 获取表单房屋数据
const fetchFormHouses = async (buildingId) => {
  try {
    const response = await getHouse(buildingId)
    formHouses.value = response.data || response || []
  } catch (error) {
    console.log("获取表单房屋数据失败:", error)
    formHouses.value = []
  }
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

// 表单重置
function reset() {
  form.value = {
    repairId: null,
    communityId: null,
    buildingId: null,
    houseId: null,
    buildingName: null,
    communityName: null,
    workName: null,
    repairType: null,
    roomNo: null,
    reporter: null,
    reporterPhone: null,
    reportTime: null,
    description: null,
    images: null,
    status: null,
    handler: null,
    handleTime: null,
    handleDescription: null,
    priority: null,
    estimatedTime: null,
    actualTime: null,
    fee: null,
    isPaid: null,
    createTime: null,
    updateTime: null
  }
  formBuildingList.value = []
  formHouses.value = []
  proxy.resetForm("repairRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.repairId)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  open.value = true
  title.value = "添加报修管理"
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset()
  const _repairId = row.repairId || ids.value
  getRepair(_repairId).then(response => {
    form.value = response.data
    open.value = true
    title.value = "修改报修管理"

    // 编辑时，如果已有社区ID，则加载对应的楼宇数据
    if (form.value.communityId) {
      fetchFormBuildings(form.value.communityId).then(() => {
        // 如果已有楼宇ID，则加载对应的房屋数据
        if (form.value.buildingId) {
          fetchFormHouses(form.value.buildingId)
        }
      })
    }
  })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["repairRef"].validate(valid => {
    if (valid) {
      if (form.value.repairId != null) {
        updateRepair(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addRepair(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _repairIds = row.repairId || ids.value
  proxy.$modal.confirm('是否确认删除报修管理编号为"' + _repairIds + '"的数据项？').then(function () {
    return delRepair(_repairIds)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {
  })
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('property/repair/export', {
    ...queryParams.value
  }, `repair_${new Date().getTime()}.xlsx`)
}

/** 查看详情按钮操作 */
// 修改查看详情方法
const handleViewDetail = (row) => {
  try {
    let repairData
    if (row && row.repairId) {
      repairData = row
    } else {
      if (ids.value.length !== 1) {
        proxy.$modal.msgError("请选择一条数据查看详情")
        return
      }
      repairData = repairList.value.find(item => item.repairId === ids.value[0])
    }

    if (!repairData) {
      proxy.$modal.msgError("未找到报修数据")
      return
    }

    sessionStorage.setItem('currentRepairDetail', JSON.stringify(repairData))

    // 使用 router.push 的 Promise 形式
    router.push(`/property/repair/repairDetail/${repairData.repairId}`)
        .then(() => {
          console.log('跳转成功')
        })
        .catch(err => {
          console.error('跳转失败:', err)
          proxy.$modal.msgError("页面跳转失败，请检查路由配置")
        })

  } catch (error) {
    console.error('处理详情跳转时出错:', error)
    proxy.$modal.msgError("操作失败，请重试")
  }
}


// 修改查看进度方法
function lookStream() {
  try {
    router.push({
      path: `/property/repair/lookStream`
    }).then(() => {
      console.log('跳转到报修进度页面成功')
    }).catch(err => {
      console.error('跳转到报修进度页面失败:', err)
      proxy.$modal.msgError("无法跳转到报修进度页面")
    })
  } catch (error) {
    console.error('跳转报修进度页面时出错:', error)
    proxy.$modal.msgError("跳转失败，请重试")
  }
}
const handleAvatarSuccess = (response) => {
  ElMessage.success("上传成功")
  // console.log(response)
  form.value.images = response.msg
}

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/png') {
    ElMessage.error('上传的图片或格式不正确')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('上传的照片不超过2MB!')
    return false
  }
  return true
}

const fetchOptions = async () => {
  try {
    const response = await getoption()
    optiones.value = response.data || response
  } catch (error) {
    console.log("获取数据失败:", error)
  }
}

// 搜索区域社区变化监听
const handleCommunityChange = (communityId) => {
  queryParams.value.buildingId = null
  queryParams.value.houseId = null
  if (communityId) {
    fetchBuildings(communityId)
  } else {
    buildingList.value = []
    houses.value = []
  }
}

// 搜索区域获取楼宇的方法
const fetchBuildings = async (communityId) => {
  try {
    const response = await getBuilding(communityId)
    buildingList.value = response.data || response || []
  } catch (error) {
    console.log("获取楼宇数据失败:", error)
    buildingList.value = []
  }
}

// 搜索区域获取房屋信息的方法
const fetchHouses = async (buildingId) => {
  try {
    const response = await getHouse(buildingId)
    houses.value = response.data || response || []
  } catch (error) {
    console.log("获取房屋数据失败:", error)
    houses.value = []
  }
}

// 监听搜索区域楼宇ID变化
watch(() => queryParams.value.buildingId, (newVal) => {
  queryParams.value.houseId = null
  if (newVal) {
    fetchHouses(newVal)
  } else {
    houses.value = []
  }
})



// 在组件挂载时调用
onMounted(() => {
  getWorkerList()
  fetchOptions()
  getList()
})
</script>


<style scoped>
/* 使用 scoped 确保样式只作用于当前组件 */
.repair-container {
  padding: 20px;
}

/* 深度选择器用于修改子组件样式（谨慎使用） */
:deep(.el-table__cell) {
  padding: 8px 0;
}
/* 表格图片单元格样式 */
.image-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.table-image {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s;
}

.table-image:hover {
  transform: scale(1.05);
}

.no-image {
  color: #999;
  font-size: 12px;
}

/* 调整表格行高 */
.el-table__body tr {
  height: 80px;
}

/* 调整表格单元格内边距 */
.el-table .el-table__cell {
  padding: 8px 0;
}

/* 图片预览样式调整 */
:deep(.el-image-viewer__wrapper) {
  z-index: 9999 !important;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .el-table__body tr {
    height: 60px;
  }

  .table-image {
    width: 60px;
    height: 60px;
  }
}
</style>

<style>
/* 全局样式加上命名空间 */
.repair-global .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
}
/* 上传组件样式保持不变 */
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}


.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>